$(document).ready(function () {



    $('#nav-sendmail').click(function (e) {

        e.preventDefault();

        resetValidation();

        if (!validate()) {
            return false;
        }


        var email = $('#email').val();
        var fullname = $('#fullname').val();
        var message = $('#message').val();
        var subject = $('#subject').val();
        var datetime = new Date().getTime();
        var formatDateTime = "\/Date(" + datetime + ")\/";

        var args = { "Email": email, "Fullname": fullname, "Message": message, "Subject": subject, "Time": formatDateTime };

       // console.log(args);

        $.ajax({
            type: "POST",
            //async: false,
            url: "http://uclwebservicetest.cloudapp.net/Services/users.svc/contactus",
            data: JSON.stringify(args),
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                console.log("response");
                console.log(response);
                $('#info').show();
                $('#info').html('Your message has been successfully sent.');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $('#info').show();
                $('#info').html('An error occurred while trying to send your message. Try again later.');

                console.log(jqXHR.status);
                console.log(textStatus);
                console.log(errorThrown);

                console.log("ARGS: %s", JSON.stringify(args));
            }
        });
    });



    /// Functions
    function resetValidation() {
        ///Reset validation
        $("#email").css("outline", "");
        $("#email").css("margin-left", "");
        $("#email").css("margin-top", "");
        $("#email").css("width", "96%");

        $("#fullname").css("outline", "");
        $("#fullname").css("margin-left", "");
        $("#fullname").css("margin-top", "");
        $("#fullname").css("width", "96%");

        $("#message").css("outline", "");
        $("#message").css("margin-left", "");
        $("#message").css("margin-top", "");
        $("#message").css("width", "96%");

        $("#subject").css("outline", "");
        $("#subject").css("margin-left", "");
        $("#subject").css("margin-top", "");
        $("#subject").css("width", "96%");
    }

    function validate() {
        var isValid = true;

        /// Validate input
        if ($('#email').val() == "" || $('#email').val() == "Email") {
            $("#email").css("outline", "3px solid rgb(235, 46, 46)");
            $("#email").css("margin-left", "3px");
            $("#email").css("margin-top", "3px");
            $("#email").css("width", "94.5%");
            isValid = false;
        }

        if ($('#fullname').val() == "" || $('#fullname').val() == "Fullname") {
            $("#fullname").css("outline", "3px solid rgb(235, 46, 46)");
            $("#fullname").css("margin-left", "3px");
            $("#fullname").css("margin-top", "3px");
            $("#fullname").css("width", "94.5%");
            isValid = false;
        }

        if ($('#message').val() == "" || $('#message').val() == "Message...") {
            $("#message").css("outline", "3px solid rgb(235, 46, 46)");
            $("#message").css("margin-left", "3px");
            $("#message").css("margin-top", "3px");
            $("#message").css("width", "94.5%");
            isValid = false;
        }

        if ($('#subject').val() == "" || $('#subject').val() == "Subject") {
            $("#subject").css("outline", "3px solid rgb(235, 46, 46)");
            $("#subject").css("margin-left", "3px");
            $("#subject").css("margin-top", "3px");
            $("#subject").css("width", "94.5%");
            isValid = false;
        }

        console.log(isValid);
        if (!isValid)
            return false;
        else
            return true;
    }

    /// Focusout input
    $("#email").focusout(function () {
        if ($(this).val() == "Email") {
            $("#email").css("outline", "3px solid rgb(235, 46, 46)");
            $("#email").css("margin-left", "3px");
            $("#email").css("margin-top", "3px");
            $("#email").css("width", "94.5%");
        } else {
            $("#email").css("outline", "");
            $("#email").css("margin-left", "");
            $("#email").css("margin-top", "");
            $("#email").css("width", "96%");
        }
    });

    $("#fullname").focusout(function () {
        if ($(this).val() == "Fullname") {
            $("#fullname").css("outline", "3px solid rgb(235, 46, 46)");
            $("#fullname").css("margin-left", "3px");
            $("#fullname").css("margin-top", "3px");
            $("#fullname").css("width", "94.5%");
        } else {
            $("#fullname").css("outline", "");
            $("#fullname").css("margin-left", "");
            $("#fullname").css("margin-top", "");
            $("#fullname").css("width", "96%");
        }
    });

    $("#subject").focusout(function () {
        if ($(this).val() == "Subject") {
            $("#subject").css("outline", "3px solid rgb(235, 46, 46)");
            $("#subject").css("margin-left", "3px");
            $("#subject").css("margin-top", "3px");
            $("#subject").css("width", "94.5%");
        } else {
            $("#subject").css("outline", "");
            $("#subject").css("margin-left", "");
            $("#subject").css("margin-top", "");
            $("#subject").css("width", "96%");
        }
    });

    $("#message").focusout(function () {
        if ($(this).val() == "Message...") {
            $("#message").css("outline", "3px solid rgb(235, 46, 46)");
            $("#message").css("margin-left", "3px");
            $("#message").css("margin-top", "3px");
            $("#message").css("width", "94.5%");
        } else {
            $("#message").css("outline", "");
            $("#message").css("margin-left", "");
            $("#message").css("margin-top", "");
            $("#message").css("width", "96%");
        }
    });

});